<template>
  <div class="full box-border" style="padding: 30px 20px">
    <div  style="width:1261px;margin: 0 auto">
      <el-table
        :data="computedPaperData"
        border
        @selection-change="handleSelectionChange"
        :v-loading="loading"
        empty-text="当前暂无数据"
      >
        <el-table-column
          label="全选"
          width="80"
          type="selection"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="type.name"
          label="组卷方式"
          width="120">
        </el-table-column>
        <el-table-column
          label="考试时长"
          width="120">
          <template v-slot="{row}">
            {{row.timeLen == -1?'不限时':row.timeLen}}
          </template>
        </el-table-column>
        <el-table-column
          prop="score"
          label="总分"
          width="120">
        </el-table-column>
        <el-table-column
          label="创建人"
          width="120">
          <template v-slot="{row}">
            <el-tag type="success">{{row.creator.name}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          width="200">
          <template v-slot="{row}">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ row.created }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="320">
          <template v-slot="{$index,row}">
            <div class="operation-button-group">
              <el-button @click="handleClick($index,row)" size="medium" type="text">
                <el-tooltip effect="dark" content="查看" placement="top-start">
                  <i class="fa fa-eye"></i>
                </el-tooltip>
              </el-button>
              <el-button size="medium" type="text">
                <el-tooltip effect="dark" content="编辑" placement="top-start">
                  <i class="fa fa-edit"></i>
                </el-tooltip>
              </el-button>
              <el-button type="text">
                <el-tooltip effect="dark" content="删除" placement="top-start">
                  <i class="fa fa-trash"></i>
                </el-tooltip>
              </el-button>
              <el-button type="text">
                <el-tooltip effect="dark" content="复制" placement="top-start">
                  <i class="fa fa-copy"></i>
                </el-tooltip>
              </el-button>
              <el-button type="text">
                <el-tooltip effect="dark" content="创建考试" placement="top-start">
                  <i class="el-icon-postcard"></i>
                </el-tooltip>
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="full-width">
        <el-pagination
          class="fr"
          style="margin: 10px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="paperPages.curPage"
          :page-size="paperPages.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paperPages.total">
        </el-pagination>
      </div>
      <add-paper-dialog width="30%" />
    </div>
  </div>
</template>

<script>
import api from '@/api'
import AddPaperDialog from '../addPaper/AddPaperDialog'
export default {
  mounted () {
    this.getPapers()
  },
  methods: {
    handleClick (row) {
      console.log(row)
    },
    handleSelectionChange (selection) {
      this.$store.commit('paper/selectPapers', selection)
    },
    getPapers () {
      api.getPapers(this.paperPages.curPage - 1, this.paperPages.pageSize)
        .then(api.commonResp((success, data) => {
          if (success) {
            data.curPage++
            this.paperPages = data
          } else {
            console.log(success)
            this.$message(data)
          }
          this.loading = false
        })).catch(() => {
          this.$message('出错了')
          this.loading = false
        })
    }
  },
  data () {
    return {
      loading: true,
      paperPages: {
        data: [],
        curPage: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  computed: {
    computedPaperData () {
      let paperData = this.paperPages.data
      if (paperData) {
        paperData.forEach((paper) => {
          switch (paper.type) {
            case 1:paper.type = {
              value: 1,
              name: '抽题组卷'
            }; break
            case 2:paper.type = {
              value: 2,
              name: '手动组卷'
            }; break
          }
        })
      }
      return paperData
    }
  },
  components: {
    AddPaperDialog
  }
}
</script>

<style scoped lang="less">
  .operation-button-group{
    .el-button {
      font-size: 20px;
      margin: 0 15px;
    }
  }
</style>
